<template>
  <div>
    <div class="top-panel">
      <el-card>
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
          label-position="right"
        >
          <el-row>
            <el-col :span="5">
              <el-form-item label="字典编号" size="small">
                <el-input
                  class="password-input"
                  v-model="searchForm.propValueFuzzy"
                  clearable
                  placeholder="支持模糊搜索"
                  @keyup.enter.native="loadDictList"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="字典描述" size="small">
                <el-input
                  class="password-input"
                  v-model="searchForm.propNameFuzzy"
                  clearable
                  placeholder="支持模糊搜索"
                  @keyup.enter.native="loadDictList"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="4"
              :style="{ paddingLeft: '10px', 'padding-top': '3px' }"
            >
              <el-button type="success" size="mini" @click="loadDictList()"
                >查询</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-button
                v-has="permissionCode.edit"
                type="primary"
                size="mini"
                @click="showEdit(null, 'add')"
                >新增字典</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-row :gutter="10">
      <el-col :span="17">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典列表</span>
          </div>
          <Table
            ref="dataTable"
            :columns="columns"
            :fetch="loadDictList"
            :dataSource="tableData"
            :options="tableOptions"
            @row-click="showDetail"
          >
          </Table>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典详情</span>
          </div>
          <el-table border style="width: 100%" :data="dicDetailInfo.subData">
            <el-table-column prop="propValue" label="字典编号">
            </el-table-column>
            <el-table-column prop="propName" label="字典描述">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <Dialog
      ref="editDialog"
      :title="editDialogInfo.title"
      :buttons="editDialogInfo.buttons"
      :visible="editDialogInfo.show"
      @close="editDialogInfo.show = false"
      :width="'600px'"
    >
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        class="from"
        label-width="100px"
      >
        <el-form-item label="字典编号" prop="propValue" size="small">
          <el-input
            :maxLength="20"
            v-model="formData.propValue"
            placeholder="请输入字典编号 eg:productSize"
          />
        </el-form-item>
        <el-form-item label="字典描述" prop="propName" size="small">
          <el-input
            :maxLength="20"
            v-model="formData.propName"
            placeholder="请输入字典描述 eg:商品尺码"
          />
        </el-form-item>
        <el-form-item label="字典详情" class="cust-model-item">
          <div class="prop-line-panel">
            <el-row :gutter="5" :style="{ 'margin-bottom': '10px' }">
              <el-col :span="10">
                字典值
              </el-col>
              <el-col :span="10">
                字典描述
              </el-col>
              <el-col :span="4">
                <el-row>
                  <el-col :span="8"></el-col>
                  <el-col :span="8"></el-col>
                  <el-col :span="8">
                    <span class="iconfont icon-add-solid" @click="addRowData" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row
              class="row-line"
              :gutter="5"
              v-for="(item, index) in formData.subData"
              :key="index"
            >
              <el-col :span="10">
                <el-form-item
                  size="small"
                  label-width="0px"
                  :key="index"
                  :prop="'subData.' + index + '.propValue'"
                  :rules="{
                    required: true,
                    message: '字典值不能为空',
                  }"
                >
                  <el-input :maxLength="20" v-model="item.propValue" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  size="small"
                  label-width="0px"
                  :key="index"
                  :prop="'subData.' + index + '.propName'"
                  :rules="{
                    required: true,
                    message: '字典描述不能为空',
                  }"
                >
                  <el-input :maxLength="20" v-model="item.propName" />
                </el-form-item>
              </el-col>
              <el-col :span="4" class="op">
                <el-row>
                  <el-col :span="8">
                    <span
                      class="iconfont icon-up"
                      @click="updateRowData(index, -1)"
                      title="上移"
                      v-if="index > 0"
                    ></span>
                  </el-col>
                  <el-col :span="8">
                    <span
                      class="iconfont icon-down"
                      @click="updateRowData(index, 1)"
                      title="上移"
                      v-if="index < formData.subData.length - 1"
                    ></span>
                  </el-col>
                  <el-col :span="8">
                    <span
                      class="iconfont icon-reduce-solid"
                      @click="delRowData(index)"
                      title="删除"
                    ></span>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      permissionCode: {
        edit: 'settings_dic_edit',
        del: 'settings_dic_del',
      },
      columns: [
        {
          label: '字典编号',
          prop: 'propValue',
        },
        {
          label: '字典描述',
          prop: 'propName',
        },
        {
          label: '操作',
          prop: 'operation',
          width: 150,
          render: (row, index) => {
            return (
              <div class="table-list-op-btns">
                <span v-has={this.permissionCode.edit}>
                  <a
                    href="javascript:void(0)"
                    onClick={(e) => this.showEdit(e, 'edit', row)}
                  >
                    编辑
                  </a>
                </span>
                <span v-has={this.permissionCode.del}>
                  <a
                    href="javascript:void(0)"
                    onClick={(e) => this.delDict(e, row.id)}
                  >
                    删除
                  </a>
                </span>
              </div>
            )
          },
        },
      ],
      tableData: {},
      tableOptions: {
        topHeight: 150,
      },
      api: {
        loadDict: '/settings/loadDictList',
        saveDict: '/settings/saveDict',
        getDict: '/settings/getDict',
        delDict: '/settings/delDict',
      },
      //弹出框相关
      editDialogInfo: {
        show: false,
        title: '新增字典',
        buttons: [
          {
            type: 'primary',
            text: '确定',
            click: (e) => {
              this.submitForm(e)
            },
          },
        ],
      },
      formData: {
        pid: 0,
      },
      rules: {
        propValue: [{ required: true, message: '请输入字典编号' }],
        propName: [{ required: true, message: '请输入字典描述' }],
        sort: [
          { required: true, message: '请输入排序号' },
          {
            validator: this.Verify.number,
            trigger: 'blur',
            message: '请输入正确的值',
          },
        ],
      },
      subDataList: [],
      dicDetailInfo: {},
      searchForm: {},
    }
  },
  methods: {
    async loadDictList() {
      let params = {
        pageNo: this.tableData.pageNo,
        pageSize: this.tableData.pageSize,
      }
      Object.assign(params, this.searchForm)

      let result = await this.Request({
        url: this.api.loadDict,
        params: params,
      })
      this.tableData = result

      let row = undefined
      if (this.curRowData !== undefined) {
        row = result.list.find((item) => {
          return item.payChannelId == this.curRowData.payChannelId
        })
      }
      if (row == undefined) {
        row = result.list.length > 0 ? result.list[0] : undefined
      }

      if (row != undefined) {
        this.$refs.dataTable.setCurrentRow(row)
        this.showDetail(row)
      } else {
        this.dicDetailInfo = {}
      }
    },

    //编辑
    showEdit(e, type, data) {
      if (e) {
        e.stopPropagation()
      }
      this.editDialogInfo.show = true
      this.$nextTick(async () => {
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields()
        }
        if (type === 'add') {
          this.editDialogInfo.title = '新增字典'
          this.formData = {
            pid: 0,
            subData: [],
          }
        } else {
          this.editDialogInfo.title = '修改字典'
          let result = await this.Request({
            url: this.api.getDict,
            params: {
              id: data.id,
            },
          })
          this.formData = result
        }
      })
    },
    //删除
    delDict(e, id) {
      if (e) {
        e.stopPropagation()
      }
      this.$confirm(`确定要删除吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await this.Request({
            url: this.api.delDict,
            params: {
              id: id,
            },
          })
          this.$message.success('删除成功')
          this.loadDictList()
        })
        .catch(() => {})
    },
    //增加行
    addRowData() {
      this.formData.subData.push({
        propValue: '',
        propName: '',
      })
    },
    delRowData(index) {
      this.formData.subData.splice(index, 1)
    },
    updateRowData(index, number) {
      let subData = this.formData.subData
      let temp = subData[index]
      subData.splice(index, 1)
      subData.splice(index + number, 0, temp)
    },
    submitForm(e) {
      e.preventDefault()
      this.$refs.formData.validate(async (valid) => {
        if (!valid) {
          return false
        }
        await this.Request({
          url: this.api.saveDict,
          params: this.formData,
          dataType: 'json',
        })
        this.$refs.editDialog.close()
        this.$message.success('保存成功')
        this.loadDictList()
      })
    },
    showDetail(row) {
      this.dicDetailInfo = row
    },
  },
  created() {},
}
</script>

<style lang="less" scoped>
.from {
  .sub-table {
    width: 100%;
    td {
      text-align: center;
    }
  }
  .btn-add {
    float: right;
    color: #096dd9;
    margin-top: 8px;
    font-size: 18px;
    cursor: pointer;
  }
  .sub-table-title {
    text-align: center;
  }

  .cust-model-item {
    margin-bottom: 5px;
  }

  .iconfont {
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px;
    color: #3a8ee6;
  }
  .icon-reduce-solid {
    color: red;
  }
  .prop-line-panel {
    overflow: hidden;
    .iconfont {
      cursor: pointer;
    }

    .el-row .el-col {
      min-height: 20px;
    }
  }
}
.sub-prop {
  display: inline-block;
  margin-right: 8px;
}
</style>
